import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListRightWarrap } from './style'
import { shallowEqual, useDispatch } from 'react-redux'
import { useAppSelector } from '@/store'
import { Link, useLocation } from 'react-router-dom'
import { getQueryObject, getSizeImage } from '@/utils/format-utils'
import ThemeRightPlaylist from '@/components/theme-right-playlist'
import { getSimilarAlbumFatch } from '@/store/modules/musicplayer'

interface IProps {
  children?: ReactNode
}

const PlayListRight: FC<IProps> = () => {
  const dispatch = useDispatch()
  const { id } = useLocation().state
  useEffect(() => {
    dispatch(getSimilarAlbumFatch({ id }))
  }, [dispatch, id])
  const { playListLiked, similarAlbum } = useAppSelector(
    (state) => ({
      playListLiked: state.musicplayer.playListLiked,
      similarAlbum: state.musicplayer.similarAlbum
    }),
    shallowEqual
  )

  return (
    <PlayListRightWarrap>
      <div className="header">喜欢这个歌单的人</div>
      <div className="avatar">
        {playListLiked &&
          playListLiked.map((item) => {
            return (
              <Link
                to={`/users/home?id=${item.userId}`}
                className="image"
                key={item.userId}
              >
                <img src={getSizeImage(item.avatarUrl, 40)} alt="" />
              </Link>
            )
          })}
      </div>
      <div className="header">热门歌单</div>

      {similarAlbum &&
        similarAlbum.map((item, index) => {
          return (
            <ThemeRightPlaylist key={index} info={item}></ThemeRightPlaylist>
          )
        })}
    </PlayListRightWarrap>
  )
}

export default memo(PlayListRight)
